import React, { useState,useEffect, useRef,useTransition } from 'react'
import {Button, Card,Modal,Form,message,Row,Col,Input,Upload,Select,Steps,InputNumber,Tooltip,Statistic } from 'antd'
import { useNavigate } from 'react-router-dom';
import useCacheAlive from '@/hooks/useCacheAlive'
import MemoTable from '@/components/MemoTable';
import { useTranslation } from 'react-i18next';
import { UploadOutlined } from '@ant-design/icons';  
import {download} from '@/utils/request';
import { del,add,edit} from "@/api/modules/tspec2015";
import { listLog,getLog,delLog,addLog,updateLog} from "@/api/tool/log";
import { groupList,listDictionary,getDictionary,delDictionary,addDictionary,updateDictionary} from "@/api/tool/dictionary"
import { upload } from "@/api/modules/common";
import { ProFormColumnsType } from '@ant-design/pro-components'
import { list, delOperlog, cleanOperlog } from "@/api/monitor/operlog";
import { listLoginfor,listDays,updateDays, delLogininfor, cleanLogininfor } from "@/api/monitor/logininfor";
const { Step } = Steps;  

const logManagement = () => {
  const navigate = useNavigate();
  const { t } = useTranslation()
  const [isModalVisible, setIsModalVisible] = useState(false); 
  const [isModalVisible2, setIsModalVisible2] = useState(false); 
  const [Title, setTitle] = useState("")  
  const [form] = Form.useForm();  
  const [fileList, setFileList] = useState([]); 
  const [annex, setAnnex] = useState(""); 
  const [serial, setSerial] = useState("");
  const [productTypeBodyPart, setProductTypeBodyPart] = useState("");
  const [isView, SetisView] = useState(false)
  const [onReloadNum, setReloadNum] = useState(null); 
  const [onReloadNum1, setReloadNum1] = useState(null); 
  const [onReloadNum2, setReloadNum2] = useState(null); 
  const [isModalINCIVisible, setIsModalINCIVisible] = useState(false);
  const [typeList,setTypelist] = useState([])
  const [daysList, setDaysList] = useState([]); 
  const [deleteStatus,setDeleteStatus] = useState(false)
  const [deleteStatus2,setDeleteStatus2] = useState(false)
  const [currentStep, setCurrentStep] = useState(0);  

  const maodianlist = [  
    '登录日志',  
    '操作日志',  
    '业务日志',  
  ];  

 // 创建refs来引用Card元素  
 const cardRef1 = useRef(null);  
 const cardRef2 = useRef(null);  
 const cardRef3 = useRef(null);  
 const cardRef4 = useRef(null); 
  useEffect(()=>{
    getType()
    getDays()
    handleStepChange(currentStep)
  },[])

  const getType = () =>{
    const queryParams2= {
      pageNum: 1,
      pageSize: 9999,
      type:null,
    }
    groupList(queryParams2).then(res=>{
      setTypelist(res.data.rows) 
    })
  }

  const getDays = () =>{
    listDays().then(res=>{
      console.log(res,'resdays')
      setDaysList(res.data.rows)
    })
  }

  const formColumns:ProFormColumnsType[] = [ {  
    title: t('log.menu'),  
    dataIndex: 'menu', // 假设这是select绑定的字段名  
    valueType: 'select', // 字段类型  
    valueEnum: {
      '安全毒理模块-报告管理': { text: '安全毒理模块-报告管理', status: '安全毒理模块-报告管理' },
      '原料管理-原料': { text: '原料管理-原料', status: '原料管理-原料' },
      '原料管理-原料功能': { text: '原料管理-原料功能', status: '原料管理-原料功能' },
      '原料管理-原料风险物质': { text: '原料管理-原料风险物质', status: '原料管理-原料风险物质' },
      '基础数据库-已使用化妆品原料目录(2021)': { text: '基础数据库-已使用化妆品原料目录(2021)', status: '基础数据库-已使用化妆品原料目录(2021)' },
      '基础数据库-2015版安全技术规范': { text: '基础数据库-2015版安全技术规范', status: '基础数据库-2015版安全技术规范' },
      '基础数据库-Ingredient文献数据库': { text: '基础数据库-Ingredient文献数据库', status: '基础数据库-Ingredient文献数据库' },
      '基础数据库-Ingredient安全信息标注': { text: '基础数据库-Ingredient安全信息标注', status: '基础数据库-Ingredient安全信息标注' },
      '基础数据库-风险物质': { text: '基础数据库-风险物质', status: '基础数据库-风险物质' },
      '基础数据库-暴露量参数': { text: '基础数据库-暴露量参数', status: '基础数据库-暴露量参数' },
      '基础数据库-参数配置': { text: '基础数据库-参数配置', status: '基础数据库-参数配置' },
    },
  },{  
    title: t('log.type'),  
    dataIndex: 'type', // 假设这是select绑定的字段名  
    valueType: 'select', // 字段类型  
    valueEnum: {
      'zy_safety_sccs_value': { text: '暴露量参数', status: '暴露量参数' },
      'zy_law_incigroup': { text: '安全技术规范组分', status: '安全技术规范组分' },
      'zy_safety_ingredient_subject_test_result': { text: '成分毒理学终点', status: '成分毒理学终点' },
      'zy_safety_function': { text: '原料功能', status: '原料功能' },
      'zy_safety_rm': { text: '原料', status: '原料' },
      'zy_product_inci_risksubstance': { text: '成分风险物质', status: '成分风险物质' },
      'zy_safety_ingredient': { text: '成分Ingredient', status: '成分Ingredient' },
      'zy_safety_rm_wording': { text: '原料话术配置', status: '原料话术配置' },
      'zy_law_inci_list': { text: '安全技术规范组分INCI清单', status: '安全技术规范组分INCI清单' },
      'zy_safety_product_fm': { text: '报告配方信息', status: '报告配方信息' },
      'zy_safety_report': { text: 'Ingredient文献数据', status: 'Ingredient文献数据' },
      'zy_safety_subject_def': { text: '毒理学终点定义', status: '毒理学终点定义' },
      'zy_law_inci': { text: '法规INCI', status: '法规INCI' },
      'zy_safety_product': { text: '报告产品信息', status: '报告产品信息' },
      'zy_safety_remark': { text: 'Ingredient附录数据', status: 'Ingredient附录数据' },
      'zy_product_risksubstance': { text: '风险物质清单', status: '风险物质清单' },
      'zy_product_rm_risksubstance': { text: '原料风险物质', status: '原料风险物质' },
      'zy_safety_function_category': { text: '原料功能大类', status: '原料功能大类' },
      'zy_safety_rm_inci': { text: '原料成分', status: '原料成分' },
    },
  },{
    title: t('log.searchValue'),
    dataIndex: 'searchValue',
    valueType: 'text', 
  }]

  const formColumns1:ProFormColumnsType[] = [ 
  {
    title: '系统模块',
    dataIndex: 'title',
    valueType: 'select', // 字段类型  
    valueEnum: {
      '用户管理': { text: '用户管理', status: '用户管理' },
      '菜单管理': { text: '菜单管理', status: '菜单管理' },
      '部门管理': { text: '部门管理', status: '部门管理' },
      '角色管理': { text: '角色管理', status: '角色管理' },
    }, 
  }, {
    title: '操作人员',
    dataIndex: 'operName',
    valueType: 'text', 
  },]

  const formColumns2:ProFormColumnsType[] = [ 
   {
      title: '用户名称',
      dataIndex: 'userName',
      valueType: 'text', 
    },]

  const businessTypeDisplayMap = {
    1:'新增',
    2:'修改',
    3:'删除',
    4:'授权',
    5:'导出',
    6:'导入',
    7:'强退',
    8:'生成代码',
    9:'清空数据'
  }

  const statusDisplayMap = {
    0:'成功',
    1:'失败'
  }

  const columns1: any = [
    {
      title: '日志编号',
      dataIndex: 'operId',
      key: 'operId',
      width: 80,
      fixed:'left',
      ellipsis: {
        showTitle: false,
      },
      render: (operId) => (
        <Tooltip placement="topLeft" title={operId}>
          {operId}
        </Tooltip>
      ),
    },
    {
      title: '系统模块',
      dataIndex: 'title',
      width: 100,
      key: 'title',
      ellipsis: {
        showTitle: false,
      },
      render: (title) => (
        <Tooltip placement="topLeft" title={title}>
          {title}
        </Tooltip>
      ),
    },
    {
      title: '操作类型',
      dataIndex: 'businessType',
      width: 120,
      key: 'businessType',
      ellipsis: {
        showTitle: false,
      },
      render: (_, record) => {  
        // 使用businessType作为键从映射中获取显示文本  
        const displayText = businessTypeDisplayMap[record.businessType] || record.businessType;  
        return (  
          <Tooltip placement="topLeft" title={displayText}>  
            {displayText}  
          </Tooltip>  
        );  
      }, 
    },
    {
      title: '请求方式',
      dataIndex: 'requestMethod',
      key: 'requestMethod',
      width:100,
      ellipsis: {
        showTitle: false,
      },
      render: (requestMethod) => (
        <Tooltip placement="topLeft" title={requestMethod}>
          {requestMethod}
        </Tooltip>
      ),
    },
    {
      title: '操作人员',
      dataIndex: 'operName',
      key: 'operName',
      width:100,
      ellipsis: {
        showTitle: false,
      },
      render: (operName) => (
        <Tooltip placement="topLeft" title={operName}>
          {operName}
        </Tooltip>
      ),
    },
    {
      title: '操作参数',
      dataIndex: 'operParam',
      key: 'operParam',
      width:100,
      ellipsis: {
        showTitle: false,
      },
      render: (operParam) => (
        <Tooltip placement="topLeft" title={operParam}>
          {operParam}
        </Tooltip>
      ),
    },
    // {
    //   title: '主机',
    //   dataIndex: 'operIp',
    //   key: 'operIp',
    //   width:100,
    //   ellipsis: {
    //     showTitle: false,
    //   },
    //   render: (operIp) => (
    //     <Tooltip placement="topLeft" title={operIp}>
    //       {operIp}
    //     </Tooltip>
    //   ),
    // },
    {
      title: '操作状态',
      dataIndex: 'status',
      key: 'status',
      width:100,
      ellipsis: {
        showTitle: false,
      },
      render: (_, record) => {  
        // 使用businessType作为键从映射中获取显示文本  
        const displayText = statusDisplayMap[record.status] || record.status;  
        return (  
          <Tooltip placement="topLeft" title={displayText}>  
            {displayText}  
          </Tooltip>  
        );  
      }, 
    },
    {
      title: '操作日期',
      dataIndex: 'operTime',
      key: 'operTime',
      width:100,
      ellipsis: {
        showTitle: false,
      },
      render: (operTime) => (
        <Tooltip placement="topLeft" title={operTime}>
          {operTime}
        </Tooltip>
      ),
    },
    {  
      title: t('action'),  
      key: 'action',
      fixed:'right',
      width:80,
      render: (text, record) => {  
        // 假设record.operTime是一个有效的日期字符串  
        const currentDate = new Date();  
        const operTime = new Date(record.operTime);  
    
        // 比较两个日期，计算天数差  
        const diffDays = Math.ceil((currentDate.getTime() - operTime.getTime()) / (1000 * 60 * 60 * 24));  
    
        // 如果operTime距离当前日期超过30天，则显示按钮 
        if(daysList.length>0){
          if (diffDays > daysList[0].value) {  
            return (  
              <Button type="link" danger onClick={() => handleDelete(record.operId)}>  
                {t('delete')}  
              </Button>  
            );  
          }  
        } 

    
        // 如果不超过30天，则不显示按钮或显示其他内容  
        return (  
          <Button disabled type="link"  onClick={() => handleDelete(record.operId)}>  
            {t('delete')}  
          </Button>  
        );  
      },   
    },  
  ];

  const columns2: any = [
    {
      title: '访问编号',
      dataIndex: 'infoId',
      key: 'infoId',
      width: 80,
      fixed:'left',
      ellipsis: {
        showTitle: false,
      },
      render: (infoId) => (
        <Tooltip placement="topLeft" title={infoId}>
          {infoId}
        </Tooltip>
      ),
    },
    {
      title: '用户名称',
      dataIndex: 'userName',
      width: 100,
      key: 'userName',
      ellipsis: {
        showTitle: false,
      },
      render: (userName) => (
        <Tooltip placement="topLeft" title={userName}>
          {userName}
        </Tooltip>
      ),
    },
    // {
    //   title: '地址',
    //   dataIndex: 'ipaddr',
    //   width: 120,
    //   key: 'ipaddr',
    //   ellipsis: {
    //     showTitle: false,
    //   },
    //   render: (ipaddr) => (
    //     <Tooltip placement="topLeft" title={ipaddr}>
    //       {ipaddr}
    //     </Tooltip>
    //   ),
    // },
    {
      title: '登录地点',
      dataIndex: 'loginLocation',
      key: 'loginLocation',
      width:100,
      ellipsis: {
        showTitle: false,
      },
      render: (loginLocation) => (
        <Tooltip placement="topLeft" title={loginLocation}>
          {loginLocation}
        </Tooltip>
      ),
    },
    {
      title: '操作系统',
      dataIndex: 'os',
      key: 'os',
      width:100,
      ellipsis: {
        showTitle: false,
      },
      render: (os) => (
        <Tooltip placement="topLeft" title={os}>
          {os}
        </Tooltip>
      ),
    },
    // {
    //   title: '浏览器',
    //   dataIndex: 'browser',
    //   key: 'browser',
    //   width:100,
    //   ellipsis: {
    //     showTitle: false,
    //   },
    //   render: (browser) => (
    //     <Tooltip placement="topLeft" title={browser}>
    //       {browser}
    //     </Tooltip>
    //   ),
    // },
    {
      title: '登录状态',
      dataIndex: 'status',
      key: 'status',
      width:100,
      ellipsis: {
        showTitle: false,
      },
      render: (_, record) => {  
        // 使用businessType作为键从映射中获取显示文本  
        const displayText = statusDisplayMap[record.status] || record.status;  
        return (  
          <Tooltip placement="topLeft" title={displayText}>  
            {displayText}  
          </Tooltip>  
        );  
      }, 
    },
    {
      title: '描述',
      dataIndex: 'msg',
      key: 'msg',
      width:100,
      ellipsis: {
        showTitle: false,
      },
      render: (msg) => (
        <Tooltip placement="topLeft" title={msg}>
          {msg}
        </Tooltip>
      ),
    },
    {
      title: '访问时间',
      dataIndex: 'loginTime',
      key: 'loginTime',
      width:100,
      ellipsis: {
        showTitle: false,
      },
      render: (loginTime) => (
        <Tooltip placement="topLeft" title={loginTime}>
          {loginTime}
        </Tooltip>
      ),
    },
    {  
      title: t('action'),  
      key: 'action',
      fixed:'right',
      width:80,
      render: (text, record) => {  
        // 假设record.operTime是一个有效的日期字符串  
        const currentDate = new Date();  
        const operTime = new Date(record.loginTime);  
    
        // 比较两个日期，计算天数差  
        const diffDays = Math.ceil((currentDate.getTime() - operTime.getTime()) / (1000 * 60 * 60 * 24));
    
        // 如果operTime距离当前日期超过30天，则显示按钮
        if(daysList.length>0){
          if (diffDays > daysList[0].value) {  
            return (  
              <Button type="link" danger onClick={() => handleDelete2(record.infoId)}>  
                {t('delete')}  
              </Button>  
            );  
          }  
        }  

    
        // 如果不超过30天，则不显示按钮或显示其他内容  
        return (  
          <Button disabled type="link"  onClick={() => handleDelete2(record.infoId)}>  
            {t('delete')}  
          </Button>  
        );  
      },  
    },  
  ];

  const columns: any = [
    {
      title: t('log.menu'),
      dataIndex: 'menu',
      key: 'menu',
      width: 80,
      fixed:'left',
      ellipsis: {
        showTitle: false,
      },
      render: (menu) => (
        <Tooltip placement="topLeft" title={menu}>
          {menu}
        </Tooltip>
      ),
    },
    {
      title: t('log.typeName'),
      dataIndex: 'typeName',
      width: 100,
      key: 'typeName',
      ellipsis: {
        showTitle: false,
      },
      render: (typeName) => (
        <Tooltip placement="topLeft" title={typeName}>
          {typeName}
        </Tooltip>
      ),
    },
    {
      title: t('log.source'),
      dataIndex: 'source',
      width: 120,
      key: 'source',
      ellipsis: {
        showTitle: false,
      },
      render: (source) => (
        <Tooltip placement="topLeft" title={source}>
          {source}
        </Tooltip>
      ),
    },
    {
      title: t('log.searchValue'),
      dataIndex: 'searchValue',
      width: 80,
      key: 'searchValue',
      ellipsis: {
        showTitle: false,
      },
      render: (text,record) => {
        let searchValue = ''; // 初始化一个用于存储搜索值的变量  
  
        if (record.operatorType === "删除") {  
          // 原始值  
          const origin = JSON.parse(record.originalValue);  
        
          typeList.forEach(k => { // 使用forEach而不是map，因为我们不需要返回新数组  
            if (record.type === k.type) {  
              let data = '';  
        
              k.dataDictionaryList.forEach(d => {  
                if (d.keyField === "Y") {  
                  for (const key in origin) {  
                    if (key === d.oriName) {  
                      data += `${d.nameCn}:${origin[key]},`;  
                    }  
                  }  
                }  
              });  
        
              if (data.length > 0) {  
                data = data.substring(0, data.length - 1); // 去除最后一个逗号  
              }  
        
              // 不直接修改record.searchValue，而是将计算后的值赋给searchValue  
              searchValue = data;  
            }  
          });  
        } else {  
          let final = JSON.parse(record.finalVlaue)
               typeList.map(k=>{
                  if(record.type==k.type){
                     let data= ""
                     k.dataDictionaryList.map(d=>{
                        if(d.keyField=="Y"){
                           for (const key in final) {
                              if(key == d.oriName){
                                 data+=d.nameCn+':'+final[key]+','
                              }
                           }
                        }
                     })
                     if(data.length>0){
                        data=data.substring(0, data.length - 1)
                     }
                     searchValue=data
                  }
               })
        }  
        
        // 使用计算后的searchValue来渲染Tooltip  
        return (  
          <Tooltip placement="topLeft" title={searchValue}>  
            {searchValue}  
          </Tooltip>  
        );  


      },
    },
    {
      title: t('log.operatorType'),
      dataIndex: 'operatorType',
      key: 'operatorType',
      width:100,
      ellipsis: {
        showTitle: false,
      },
      render: (operatorType) => (
        <Tooltip placement="topLeft" title={operatorType}>
          {operatorType}
        </Tooltip>
      ),
    },
    {
      title: t('log.createBy'),
      dataIndex: 'createBy',
      key: 'createBy',
      width:100,
      ellipsis: {
        showTitle: false,
      },
      render: (createBy) => (
        <Tooltip placement="topLeft" title={createBy}>
          {createBy}
        </Tooltip>
      ),
    },
    {
      title: t('log.createTime'),
      dataIndex: 'createTime',
      key: 'createTime',
      width:100,
      ellipsis: {
        showTitle: false,
      },
      render: (createTime) => (
        <Tooltip placement="topLeft" title={createTime}>
          {createTime}
        </Tooltip>
      ),
    },
    {  
      title: t('action'),  
      key: 'action',
      fixed:'right',
      width:80,
      render: (text, record) =>  {  
        // 假设record.operTime是一个有效的日期字符串  
        const currentDate = new Date();  
        const operTime = new Date(record.createTime);  
    
        // 比较两个日期，计算天数差  
        const diffDays = Math.ceil((currentDate.getTime() - operTime.getTime()) / (1000 * 60 * 60 * 24));
    
        // 如果operTime距离当前日期超过30天，则显示按钮 
        if(daysList.length>0){
          if (diffDays > daysList[1].value) {  
            return (  
              <div>
                <Button type="link"  onClick={() => handleView(record)}>  
                  {t('view')}  
                </Button>  
                <Button type="link" danger onClick={() => handleDelete3(record.id)}>  
                  {t('delete')}  
                </Button>  
              </div>
          
            );  
          }        
        } 
            // 如果不超过30天，则不显示按钮或显示其他内容  
                  return ( 
                    <div>
                    <Button type="link"  onClick={() => handleView(record)}>  
                      {t('view')}  
                    </Button>  
                    <Button disabled type="link"  onClick={() => handleDelete3(record.id)}>  
                      {t('delete')}  
                    </Button> 
                    </div>  
                  ); 
        
      },  
    },  
  ];

  const getData1 = async (formData) => {
    const { success, data} = await list({...formData,})
    if(!success) return false
    console.log(data)
    const list2 = data.rows
    return {
      data: list2,
      total: data.total
    }
  } 

  const getData2 = async (formData) => {
    const { success, data} = await listLoginfor({...formData,})
    if(!success) return false
    console.log(data)
    const list2 = data.rows
    return {
      data: list2,
      total: data.total
    }
  } 



  const getData = async (formData) => {
    const { success, data} = await listLog({...formData,  orderByColumn:'createTime',isAsc:'desc',})
    if(!success) return false
    console.log(data)
    const list2 = data.rows
    return {
      data: list2,
      total: data.total
    }
  } 

  const handleAdd = () =>{
    SetisView(false)
    form.resetFields()
    setTitle("新增/New")
    showModal()
  }

  const showModal = () => {  
    setIsModalVisible(true);  
  };  

  
  const handleOk = () => {  
    // 调用接口添加数据，这里假设你有一个函数addFormData来处理添加逻辑  
    // const response = addFormData(newFormData);  
    // ...处理接口响应...  
    const values = form.getFieldsValue();  
    console.log(values,'values')
    let formData = daysList
    formData[0].value = values.userManagementDeleteTimeout
    formData[1].value = values.anotherStatistic
    updateDays(formData[0]).then(res=>{
      updateDays(formData[1]).then(res=>{
        message.success("Success")
        setIsModalVisible(false)
        getDays()
      })
    })
    // 根据需要更新formData或执行其他逻辑  
    // ...  
  };  

  const handleInci = (record) =>{
    console.log('编辑当前行数据：', record);
    const serial = record.serial;  
    const annex = record.annex
    setSerial(record.serial)
    setAnnex(record.annex)
    setProductTypeBodyPart(record.productTypeBodyPart)
    setIsModalINCIVisible(true)
    // 跳转到'/sa/addreport'路径，并带上id参数  
    // navigate(`/safety/children?serial=${serial}&annex=${annex}`); 
    
  }

  const handleView = (record) =>{
//    SetisView(true)
//    setTitle("查看/View")
//    console.log(record,'record')
//    form.setFieldsValue({ ...record });  
//    setIsModalVisible(true);  
    navigate(`/Log/logDetail?id=${record.id}`); 
  }

  const handleEdit = () =>{
    const formData = {userManagementDeleteTimeout:daysList[0].value,anotherStatistic:daysList[1].value}
    form.setFieldsValue(formData)
    setIsModalVisible(true)
    // 这里可以添加打开模态框并显示编辑表单的逻辑  
  }

  const handleDelete = (key) =>{
    let inciIds = []
    inciIds.push(key)
    Modal.confirm({  
      title: 'Confirm Delete',  
      content: 'Please confirm to DELETE SELECTED RECORDS!',  
      onOk() {  
        delOperlog(inciIds).then(res=>{
            message.success("Success")
            setReloadNum1(Date.now())
        }) 
      },  
    }); 
  }

  const handleDelete2 = (key) =>{
    let inciIds = []
    inciIds.push(key)
    Modal.confirm({  
      title: 'Confirm Delete',  
      content: 'Please confirm to DELETE SELECTED RECORDS!',  
      onOk() {  
        delLogininfor(inciIds).then(res=>{
            message.success("Success")
            setReloadNum2(Date.now())
        }) 
      },  
    }); 
  }

  const handleDelete3 = (key) =>{
    let inciIds = []
    inciIds.push(key)
    Modal.confirm({  
      title: 'Confirm Delete',  
      content: 'Please confirm to DELETE SELECTED RECORDS!',  
      onOk() {  
        delLog(inciIds).then(res=>{
            message.success("Success")
            setReloadNum(Date.now())
        }) 
      },  
    }); 
  }
  
  const handleINCICancel = () => {  
    setIsModalINCIVisible(false);  
  };  
  
  const handleCancel = () => {  
    setIsModalVisible(false);  
  };  

    // Steps的onChange事件处理函数  
    const handleStepChange = (nextStep) => {  
      setCurrentStep(nextStep);  
      // 根据步骤索引滚动到对应的Card  
      switch (nextStep) {  
        case 0:  
          scrollToCard(cardRef1);  
          break;  
        case 1:  
          scrollToCard(cardRef2);  
          break;  
        case 2:  
          scrollToCard(cardRef3);  
          break;  
        case 3:  
          scrollToCard(cardRef4);  
          break;  
        default:  
          break;  
      }  
    };  

      // 滚动到指定Card的函数  
  const scrollToCard = (cardRef) => {  
    if (cardRef && cardRef.current) {  
      // 滚动到目标Card的顶部位置  
      window.scrollTo({  
        top: cardRef.current.offsetTop - 70, // 减去一些值以考虑导航栏或顶部其他元素的高度  
        behavior: 'smooth', // 平滑滚动  
      });  
    }  
  };  

  const renderOperator = <>
    {/* <Button type="primary" size="small" onClick={handleAdd}>{t('add')}</Button> */}
  </>

const renderFormContent = () => {  
  return (  
    <Form form={form}>  
      {daysList.map((item, index) => (  
        <Form.Item  
          key={index}  
          label={item.name}  
          name={`item-${index}`}  
        >  
          <InputNumber min={0} precision={0} value={item.value} onChange={(value) => {  
            // 这里只是示例，实际中你可能需要更新state或data数组中的值  
            console.log(`Changed value for ${item.name}:`, value);  
          }} />  
        </Form.Item>  
      ))}  
    </Form>  
  );  
};  

  
  return (
    <div> 
      <Row justify="space-between" align="top">  
        <Col span={4} style={{ position: 'relative' }}> 
        <div  
            style={{  
              position: 'fixed',  
              top: 120, // 从顶部开始粘住  
              zIndex: 1, // 确保在其他内容之上  
              backgroundColor: 'white',  
              padding: '10px', // 可选内边距  
              // 可以添加maxHeight和overflowY来处理内容过多时的情况  
            }}  
          >  
          <Steps direction="vertical" current={currentStep} onChange={handleStepChange}>  
            {maodianlist.map((item, index) => (  
              <Step key={index} title={item} />  
            ))}  
          </Steps>  
          </div>
        </Col>
        <Col span={20}>
        <Card title={'时间'} ref={cardRef1} style={{marginTop:'2%'}}>
          <Row>  
            <Col span={24}>  
              <Button type="primary" size='small' onClick={handleEdit}>  
                {t('edit')}  
              </Button>  
            </Col>  
          </Row>  
            <Row justify="center" align="middle" style={{marginTop:'2%'}}>  
              {daysList.map((item,index)=>(
                <Col span={12}>
                  <Statistic title={item.name} value={item.value} valueStyle={{ color: '#3f8600' }} /> 
                </Col>
              ))} 
            </Row> 
            <Modal  
                title="编辑/Edit"  
                visible={isModalVisible}  
                onOk={handleOk}  
                onCancel={handleCancel}  
              >  
              <Form form={form} layout="vertical">  
                  <Form.Item  
                    label="用户管理日志删除时限(最小数字:30)"  
                    name="userManagementDeleteTimeout"  
                    rules={[{ required: true, message: '请输入删除时限!' }]}  
                  >  
                    <InputNumber min={30} />  
                  </Form.Item>  
            
                  <Form.Item  
                    label="业务数据日志删除时限(最小数字:90)"  
                    name="anotherStatistic"  
                    rules={[{ required: true, message: '请输入删除时限!' }]}  
                  >  
                    <InputNumber min={90} />  
                  </Form.Item>  
                </Form>  
              </Modal>   
          </Card>
          <Card title={'登录日志'} style={{marginTop:'2%'}}>
          <MemoTable 
              name='basic'
              formColumns={formColumns2}
              columns={columns2 as any}
              rowKey='id'
              operator={renderOperator}
              getData={getData2}
              refreshKey={onReloadNum2}
            />
          </Card>
          <Card title={'操作日志'} ref={cardRef2} style={{marginTop:'2%'}}>
            <MemoTable 
              name='basic'
              formColumns={formColumns1}
              columns={columns1 as any}
              rowKey='id'
              operator={renderOperator}
              getData={getData1}
              refreshKey={onReloadNum1}
            />
          </Card>
      
          <Card title={'业务日志'} ref={cardRef3} style={{marginTop:'2%'}}>
          <MemoTable 
            name='basic'
            formColumns={formColumns}
            columns={columns as any}
            rowKey='id'
            operator={renderOperator}
            getData={getData}
            refreshKey={onReloadNum}
          />
          </Card>
        
        </Col>
      </Row>

   
    </div>
  )
}
export default logManagement
